import React, { Component } from 'react';
import { Form, Select, Input, Button, Modal, Icon, Col, Row } from 'antd';
import AddPeer from './../AddPeer/index';
import Tips from '../../Tips/index';
const FormItem = Form.Item;
const { TextArea } = Input;

class PopForm extends Component {
  constructor() {
    super();
    this.state = {
      peernum: 0,
      peerarray: [],
      addvisible: false,
      message: ''
    };
  }
  removepeer = i => {
    var peerarray = this.state.peerarray;
    peerarray.splice(i, 1);
    this.setState({ peerarray: peerarray });
  }
  add = () => {
    if (this.state.peerarray.length >= 8) {
      this.setState({ message: 'Peer节点已达上限' }, () => {
        setTimeout(() => {
          this.setState({ message: '' });
        }, 1000);
      });
    } else {
      this.setState({ addvisible: true });
    }
  }
  addChancel = () => {
    this.setState({ addvisible: false });
  }
  addsubmit = (qq, values) => {
    let peerarray = this.state.peerarray;
    peerarray.push({
      name: values.PeerName
    });
    this.setState({ addvisible: false, peerarray: peerarray }, () => {
      this.props.form.validateFields(['peerNum'], { force: true });
    });
  }
  render() {
    const { visible, onCancel, onCreate, form } = this.props;
    const { getFieldDecorator } = form;
    var peerlist = this.state.peerarray.map((e, i) => {
      return (
        <Col span={8} key={i}>
          <p className="removepeer">
            <Icon className="dynamic-delete-button" type="minus" onClick={() => this.removepeer(i)} />{' '}
            {e.name}
          </p>
        </Col>
      );
    });
    return (
      <Modal
        visible={visible}
        closable={false}
        title="创建一个区块链网络"
        okText="创建"
        cancelText="取消"
        onCancel={onCancel}
        onOk={onCreate.bind(this, this)}
        confirmLoading={this.props.timeout}
      >
        <Form>
          <FormItem label="网络英文全称" labelCol={{ span: 7 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('networkName', {
              rules: [
                {
                  required: true,
                  message: '请输入您想创建网络的英文名称，只能包含2-20位英文字符!',
                  pattern: /^[A-Za-z]{2,20}$/
                }
              ]
            })(<Input placeholder="请输入您想创建网络的英文名称" />)}
          </FormItem>
          <FormItem label="网络中文全称" labelCol={{ span: 7 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('nickname', {
              rules: [
                {
                  required: true,
                  message: '请输入你想创建网络的中文名称，只能包含2-20位中文字符!',
                  pattern: /^[\u4e00-\u9fa5]{2,20}$/
                }
              ]
            })(<Input placeholder="请输入你想创建网络的中文名称" />)}
          </FormItem>
          <FormItem label="Peer节点数量" labelCol={{ span: 7 }} wrapperCol={{ span: 15 }}>
            {/* {getFieldDecorator('peerNum', {
                    rules: [{required: this.state.peerarray.length<2, message: '请配置peer节点数， 2-8个节点'}],
                })(
                        <div className="setPeerNum">
                            <p>Peer节点数量：<span>{this.state.peerarray.length}</span></p>
                            <Button type="dashed" onClick={this.add} style={{ width: '100%' }}>
                                <Icon type="plus" /> 配置Peer节点
                            </Button>
                            <div className="peername">
                            <Row span={15}>
                                {peerlist}
                            </Row>
                            </div>
                        </div>
                )} */}
            {getFieldDecorator('peerNum', {
              rules: [
                {
                  required: true,
                  message: '请输入你想添加的节点数，2-8个Peer节点数',
                  pattern: /^[2-8]$/
                }
              ]
            })(<Input placeholder="请输入你想添加的节点数 " />)}
          </FormItem>
          {/* <FormItem label="Orderer节点数量" labelCol={{ span: 7 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator("ordererNum", {
              rules: [
                {
                  required: true,
                  message: "请输入你想添加的节点数 ，1-2位数字",
                  pattern: /^[1-9]$|^[1-9][0-9]$/
                }
              ]
            })(<Input placeholder="请输入你想添加的节点数 " />)}
          </FormItem> */}
          <FormItem label="备注" labelCol={{ span: 7 }} wrapperCol={{ span: 15 }}>
            {getFieldDecorator('remark', {
              rules: [
                {
                  required: true,
                  message: '请输入对此网络的简要描述,20-300个字符!',
                  pattern: /^[\S\s]{20,300}$/
                }
              ]
            })(<TextArea rows={4} placeholder="请输入对此网络的简要描述" />)}
          </FormItem>
        </Form>
        <AddPeer
          visible={this.state.addvisible}
          onCancel={this.addChancel}
          addsubmit={this.addsubmit}
          data={this.state.peerarray}
        />
        <Tips message={this.state.message} />
      </Modal>
    );
  }
}
const AddForm = Form.create()(PopForm);
export default AddForm;
